<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> 自己练习 搜索 </title>
</head>
<body>
    <div id="app">
        <input type="text" v-model="my_search" />
        <ul>
            <li v-for="(value,key) in my_new_search" :key="key">
                {{ key }} -- {{ value.name }}  -- {{ value.age }}
            </li>
        </ul>
        <button @click="my_sort(2)"> 年龄升序  </button>
        <button @click="my_sort(1)"> 年龄降序  </button>
        <button @click="my_sort(0)"> 原本顺序  </button>
    </div>
</body>
</html>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
    vm = new Vue({
        el:"#app",
        data:{
            my_list: [
                {name:"zhangsan",age:19},
                {name:"lisi",age:17},
                {name:"wangwu",age:18},
                {name:"zhaoliu",age:20},
            ],
            my_search:"",
            my_sort_type:0,
        },
        methods:{
            my_sort:function (id){

                this.my_sort_type = id
            }
        },
        computed:{  // 计算属性

            my_new_search(){
                const { my_search,my_list,my_sort_type } = this
                let newArr = [...my_list]
                // console.log(my_search)
                // 实现搜索功能
                if(my_search.trim()){
                    newArr =    my_list.filter( p => p.name.indexOf(my_search) !==-1)
                }
                // 排序功能
                if(my_sort_type){
                    newArr.sort(function (p1,p2){
                        if(my_sort_type===1) {
                            return p2.age-p1.age
                        }else{
                            return p1.age-p2.age
                        }
                    })
                }
                return newArr
            }
        },

    })
</script>